<template>
	<div class="profession">
		<el-tabs type="border-card">
			<el-tab-pane label="基本信息">
				<el-form
					:model="ruleForm"
					:rules="rules"
					ref="ruleForm"
					inline
					label-width="120px"
					class="demo-ruleForm"
				>
					<el-form-item label="消防队名称" prop="name">
						<div class="dfc">
							<el-input v-model="ruleForm.name" size="small"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="成立时间" prop="name">
						<div class="dfc">
							<el-input v-model="ruleForm.name" size="small"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="站房面积" prop="name">
						<div class="dfc">
							<el-input v-model="ruleForm.name" size="small"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="消防队规模" prop="name">
						<div class="dfc">
							<el-input v-model="ruleForm.name" size="small"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="值班电话" prop="name">
						<div class="dfc">
							<el-input v-model="ruleForm.name" size="small"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="负责人员" prop="name">
						<div class="dfc">
							<el-input v-model="ruleForm.name" size="small"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="联系电话" prop="name">
						<div class="dfc">
							<el-input v-model="ruleForm.name" size="small"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="描述" prop="name">
						<div class="dfc">
							<el-input v-model="ruleForm.name" size="small"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="消防队图片" prop="name">
						<div class="dfc mt10">
							<el-upload
								action="#"
								list-type="picture-card"
								:on-preview="handlePictureCardPreview"
								:on-remove="handleRemove"
							>
								<i class="el-icon-plus"></i>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
								<img width="100%" :src="dialogImageUrl" alt="" />
							</el-dialog>
						</div>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="人员配置">
				<div class="person-show__card">
					<!-- 表格展示 -->
					<div class="table">
						<el-table :data="tableData" border style="width: 100%">
							<el-table-column type="index" align="center"></el-table-column>
							<el-table-column align="center" prop="prop" label="姓名"></el-table-column>
							<el-table-column align="center" prop="prop" label="性别"></el-table-column>
							<el-table-column align="center" prop="prop" label="职务"></el-table-column>
							<el-table-column align="center" prop="prop" label="联系电话"></el-table-column>
							<el-table-column align="center" prop="prop" label="入队时间"></el-table-column>
							<el-table-column align="center" prop="prop" label="岗前培训"></el-table-column>
						</el-table>

						<!-- 翻页 -->
						<div class="mt15">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="searchInfo.pageNum"
								:page-size="searchInfo.pageSize"
								:page-sizes="[10, 20, 50]"
								:total="totalPage"
								background
								layout="sizes, prev, pager, next, jumper"
							></el-pagination>
						</div>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="人员装配配置">
				<div class="person-show__card">
					<!-- 表格展示 -->
					<div class="table">
						<el-table :data="tableData" border style="width: 100%">
							<el-table-column type="index" align="center"></el-table-column>
							<el-table-column align="center" prop="prop" label="装备名称"></el-table-column>
							<el-table-column align="center" prop="prop" label="类别"></el-table-column>
							<el-table-column align="center" prop="prop" label="配置数量"></el-table-column>
							<el-table-column align="center" prop="prop" label="配置标准"></el-table-column>
						</el-table>

						<!-- 翻页 -->
						<div class="mt15">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="searchInfo.pageNum"
								:page-size="searchInfo.pageSize"
								:page-sizes="[10, 20, 50]"
								:total="totalPage"
								background
								layout="sizes, prev, pager, next, jumper"
							></el-pagination>
						</div>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="灭火器材">
				<div class="person-show__card">
					<!-- 表格展示 -->
					<div class="table">
						<el-table :data="tableData" border style="width: 100%">
							<el-table-column type="index" align="center"></el-table-column>
							<el-table-column align="center" prop="prop" label="型号"></el-table-column>
							<el-table-column align="center" prop="prop" label="类别"></el-table-column>
							<el-table-column align="center" prop="prop" label="数量"></el-table-column>
						</el-table>

						<!-- 翻页 -->
						<div class="mt15">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="searchInfo.pageNum"
								:page-size="searchInfo.pageSize"
								:page-sizes="[10, 20, 50]"
								:total="totalPage"
								background
								layout="sizes, prev, pager, next, jumper"
							></el-pagination>
						</div>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
 
<script>
import { turnPage } from '@/mixins/turnPage';
export default {
	mixins: [turnPage],
	name: 'Profession',
	data() {
		return {
			dialogVisible: false,
			ruleForm: {},
			rules: {},
			tableData: [],
			totalPage: 1,
			searchInfo: {
				pageSize: 10,
				pageNum: 1
			},
			dialogImageUrl: ''
		};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},

		handlePictureCardPreview() {},
		handleRemove() {}
	}
};
</script>
 
<style lang="scss">
.profession {
	font-size: 14px;

	.el-tabs__content {
		height: calc(100vh - 176px);
		@include xy-scroll;
		overflow: auto;
	}

	.el-form-item {
		width: 46%;
	}

	.el-form {
		.el-input {
			width: 254px;
		}
	}
}
</style>